<!-- 数据看板chart图表-->
<template>
	<div id="ChartStatis">
		<a-radio-group v-model:value="timeRangeType" button-style="solid" @change="radioChange">
			<a-radio-button value="0">年</a-radio-button>
			<a-radio-button value="1">月</a-radio-button>
			<a-radio-button value="2">日</a-radio-button>
		</a-radio-group>
		<div ref="chartRef" class="chart"></div>
	</div>
</template>
<script setup name="ChartStatis">
	import * as echarts from 'echarts'

	// ===========================================DATA======================================================
	const props = defineProps({
		curInfo: {
			type: Object,
			default: () => ({})
		}
	})
	const timeRangeType = ref('0') // 年、月、日
	const chartRef = ref()
	const options = ref({
		title: {
			text: '通话总量统计',
			textStyle: {
				color: '#fff',
				fontWeight: 400,
				fontSize: 16
			}
		},
		tooltip: {
			trigger: 'axis',
			backgroundColor: 'rgba(24, 35, 62, 0.9)',
			borderColor: '#1E4B9C',
			textStyle: {
				color: '#fff',
				align: 'left' // 文本左对齐
			}
		},
		grid: {
			top: '15%',
			left: '5%',
			right: '5%',
			bottom: '8%'
		},
		legend: {
			data: ['接通总时长（分钟）', '响铃总时长（分钟）'],
			textStyle: {
				color: '#fff'
			}
		},
		xAxis: [
			{
				type: 'category',
				data: [
					'07-01',
					'07-02',
					'07-03',
					'07-04',
					'07-05',
					'07-06',
					'07-07',
					'07-08',
					'07-09',
					'07-10',
					'07-11',
					'07-12'
				],
				axisPointer: {
					type: 'shadow'
				},
				axisLabel: {
					// 轴标签样式
					color: '#fff'
				}
			}
		],
		yAxis: [
			{
				type: 'value',
				// name: '案件数量/件',
				// min: 0,
				// max: 250,
				// interval: 50,
				axisLabel: {
					// 轴标签样式
					color: '#fff',
					fontSize: 12,
					formatter: '{value}'
				},
				nameTextStyle: {
					// Y轴名称的样式
					color: '#ccc',
					padding: [0, 0, 0, 0] // 调整位置，防止文字遮挡
				},
				splitLine: {
					// 分割线样式
					lineStyle: {
						color: 'rgba(255,255,255,0.1)'
					}
				}
			},
			{
				type: 'value',
				// name: '时长/分钟',
				// min: 0,
				// max: 25,
				// interval: 5,
				axisLabel: {
					// 轴标签样式
					color: '#fff',
					formatter: '{value}'
				},
				nameTextStyle: {
					// Y轴名称的样式
					color: '#ccc',
					padding: [0, 0, 0, 0] // 调整位置，防止文字遮挡
				},
				splitLine: {
					// 分割线样式
					lineStyle: {
						color: 'rgba(255,255,255,0.1)'
					}
				}
			}
		],
		series: [
			{
				name: '接通总时长（分钟）',
				type: 'line',
				showSymbol: false,
				data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
			},
			{
				name: '响铃总时长（分钟）',
				type: 'line',
				showSymbol: false,
				data: [3.0, 4.2, 2.3, 2.5, 5.3, 4.2, 6.3, 23.4, 23.0, 16.5, 12.0, 6.2]
			}
		]
	})
	let chart
	// ===========================================LIFECYCLE HOOKS===========================================
	onMounted(() => {
		// if (props.curInfo.id) {
		// getChartData()
		// }
		// window.addEventListener('resize', resizeChart)
	})
	// ===========================================METHODS==================================================
	const initChart = () => {
		if (chart) {
			chart.dispose()
		}
		chart = echarts.init(chartRef.value)
		chart.setOption(options.value)
	}
	//图表重绘
	const resizeChart = () => {
		if (chart) {
			chart.resize()
		}
	}
	//时间范围切换
	const radioChange = (e) => {
		timeRangeType.value = e.target.value
		if (chart) {
			// 重新设置图表数据
			getChartData()
		}
	}
	// ===========================================REQUEST==================================================
	//获取图表数据
	const getChartData = () => {
		initChart()
	}
</script>
<style lang="less" scoped>
	#ChartStatis {
		flex: 1;
		width: 100%;
		.chart {
			margin-top: 16px;
			width: 100%;
			height: 70%;
		}
	}
</style>
